import React from 'react'
import styles from './SideMenu.module.css'
import { sideMenuList } from './mockup'
import { Menu } from 'antd'
import { GifOutlined } from '@ant-design/icons'

export const SideMenu: React.FC = () => {
	return (
		<Menu mode='vertical' className={styles['side-menu']}>
			{sideMenuList.map((m, index) => (
				<Menu.SubMenu
					key={`side-menu-${index}`}
					title={
						<span>
							<GifOutlined />
							{m.title}
						</span>
					}
				>
					{m.subMenu.map((sm, smindex) => (
						<Menu.SubMenu
							key={`sub-menu-${smindex}`}
							title={
								<span>
									<GifOutlined />
									{sm.title}
								</span>
							}
						>
							{sm.subMenu.map((sms, smsindex) => (
								<Menu.Item key={`sub-sub-menu-${smsindex}`}>
									<span>
										<GifOutlined />
										{sms}
									</span>
								</Menu.Item>
							))}
						</Menu.SubMenu>
					))}
				</Menu.SubMenu>
			))}
		</Menu>
	)
}
